<template>
	<div class="order-box">
		<van-tabs @click="onChangeTab" :color="'#1baeae'" :title-active-color="'#1baeae'" class="order-tab" v-model="status">
			<van-tab title="全部" name="4"></van-tab>
			<van-tab title="待付款" name="0"></van-tab>
			<van-tab title="已付款" name="1"></van-tab>
			<van-tab title="待发货" name="2"></van-tab>
			<van-tab title="已发货" name="3"></van-tab>
		</van-tabs>
		<div class="content">
			<van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="order-list-refresh">
				<van-list class="list" v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :offset="10">
					<div v-for="(item, index) in list" :key="item.id" class="order-item-box" @click="goTo(item.orderNo)">
						<div class="order-item-header">
							<span>订单时间：{{ formatTime(new Date(item.otime).getTime()) }}</span>
							<span>{{ item.oispay == 1 ? '已支付' : '未支付 ' }}</span>
						</div>
						<van-card
							:key="item.id"
							:num="1"
							:price="item.pprice"
							:desc="`${item.oissend == 1 ? ' 已发货' : ' 未发货'}`"
							:title="item.pname"
							:thumb="item.ppicture"
						/>
					</div>
				</van-list>
			</van-pull-refresh>
		</div>
	</div>
</template>

<script setup>
import { reactive, toRefs, onMounted, computed, getCurrentInstance, watch, defineEmits, ref } from 'vue';
import { useStore } from 'vuex';
import { OrderList } from '@s/orders';
import {formatTime} from '@/utils/index'
const { proxy } = getCurrentInstance();
const data = reactive({});
const {} = toRefs(data);
const state = reactive({
	status: '',
	loading: false,
	finished: false,
	refreshing: false,
	list: [],
	pageSize: 4,
	pageNum: 1,
	oispay: null,
	oissend: null,
});
const { status, loading, finished, refreshing, list, page, oispay, oissend } = toRefs(state);
const loadData = async () => {
	if (state.refreshing) {
		state.pageNum = 1;
	}
	const res = await OrderList({
		uid: proxy.$store.state.user.userInfo.id,
		oispay: state.oispay,
		oissend: state.oissend,
		pageSize: state.pageSize,
		pageNum: state.pageNum,
	});
	if (state.refreshing) {
		state.list = res.data.data;
	} else {
		state.list = [...res.data.data, ...state.list];
	}
	state.loading = false;
	state.refreshing = false;
	// if (res.data.data.lastNum <state.pageNum) state.finished = true;
	if (state.list.length < 4) state.finished = true;
	if (res.data.lastNum == state.pageNum) state.finished = true;
	state.pageNum += 1;
};

const onChangeTab = (name) => {
	// 这里 Tab 最好采用点击事件，@click，如果用 @change 事件，会默认进来执行一次。
	state.status = name;
	state.list = [];
	state.pageNum = 1;
	if (name == 0) {
		state.oispay = 0;
		state.oissend = null;
	}
	if (name == 1) {
		state.oispay = 1;
		state.oissend = null;
	}
	if (name == 2) {
		state.oispay = null;
		state.oissend = 0;
	}
	if (name == 3) {
		state.oispay = null;
		state.oissend = 1;
	}
	if (name == 4) {
		state.oissend = null;
		state.oispay = null;
	}
	onRefresh();
};

const onLoad = () => {
	loadData();
};

const onRefresh = () => {
	state.finished = false;
	state.loading = true;
	onLoad();
};

const emit = defineEmits(['loading', 'isBar', 'isNav']);
onMounted(() => {
	// 初始化活动状态
	emit('loading');
	emit('isBar');
	emit('isNav');
});
</script>

<style lang="scss" scoped>
.van-pull-refresh {
	overflow: visible;
}
.list {
	margin-top: 46px;
}
.order-box .order-header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	line-height: 44px;
	padding: 0 10px;
	color: #252525;
	background: #fff;
	border-bottom: 1px solid #dcdcdc;
}
.order-box .order-header .order-name {
	font-size: 14px;
}
.order-box .order-tab {
	position: absolute;
	left: 0;
	top: 40px;
	z-index: 1000;
	width: 100%;
	border-bottom: 1px solid #e9e9e9;
}
.order-box .skeleton {
	margin-top: 60px;
}
.order-box .content {
	padding-top: 6vh;
	padding-bottom: 8vh;
}
.order-box .order-list-refresh .van-card__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.order-box .order-list-refresh .van-pull-refresh__head {
	background: #f9f9f9;
}
.order-box .order-list-refresh .order-item-box {
	margin: 20px 10px;
	background-color: #fff;
}
.order-box .order-list-refresh .order-item-box .order-item-header {
	padding: 10px 20px 0 20px;
	display: flex;
	justify-content: space-between;
}
.order-box .order-list-refresh .order-item-box .van-card {
	background-color: #fff;
	margin-top: 0;
}
</style>
